[자바스크립트] ]Select 태그의 값의 value 프로퍼티 변경시 onchange가 동작 안 하는 경우 해결하기

자바스크립트에서 select 태그에 onchange 이벤트를 사용할 수 있습니다. 그런데 onchange 이벤트가 동작하지 않는 경우가 발생할 수 있는데요... 그 원인과 해결방법을 알아봅니다.

onchange가 select 태그에 바로 동작하지 않는 경우는 select 태그를 클릭해서 값을 선택하지 않고 select 태그의 value 프로퍼티의 값을 스크립트를 사용하여 업데이트 하는 경우입니다. 예를들어...

위 값을 변경하는 경우를 예를 들면...  DOM 클릭이 아닌 스크립트를 아래처럼 사용한다고 생각해봅니다.

이 경우 updated()라는 함수가 동작하지 않습니다. 그 이유는 onchange 이벤트는 해당 엘리먼트의 blur 여부에 따라 동작하기 때문입니다.

# onchange 동작하도록 하는 해결방법은 ?

해결 방법은 onchange() 함수를 해당 DOM에 추가하여 사용하면 됩니다. 즉 select의 값을 업데이트하고 함수를 연이어 동작하면 되는 거죠. 만약 onchange()를 가진 엘리먼트 요소가 select라면 아래처럼 사용할 수 있겠죠.

위와 같이 코드를 적용하면 updated()라는 함수가 뒤따라 실행하게 됩니다.

! 참고사항

입력폼의 양식이 많은 경우 onchange()를 가지는 엘리먼트 요소가 하나가 아닌 여러개인 경우가 있을 것입니다. 이 경우 하나씩 적용하기 보다 onchange를 가지는 모든 엘리먼트를 가져와 동작시키는 방법이 더욱 편합니다. 예를들면 아래와 같습니다.

설명하면 모든 onchange 속성을 가지는 태그를 찾아 그 값을 eval() 함수를 사용하여 실행하는 방법입니다. 실제로 사용해보면 매우 편리합니다.